<template>
  <div class="root">
    <div class="header">
      <div class="user">
        <span class="title">用户</span>
        <span class="data">{{ users }}人</span>
        <i class="iconfont icon-wodewo"></i>
      </div>
      <div class="room">
        <span class="title">房间数</span>
        <span class="data">{{ rooms }} 间</span>
        <i class="iconfont icon-shouye"></i>
      </div>
      <div class="day">
        <span class="title">今日收益</span>
        <span class="data">￥{{ dayMoney }}</span>
        <i class="iconfont icon-shouyi1"></i>
      </div>
      <div class="all">
        <span class="title">总收益</span>
        <span class="data">￥{{ allMoney }}</span>
        <i class="iconfont icon-leijishouyi"></i>
      </div>
    </div>
    <div class="context" ref="myEcharts"></div>
  </div>
</template>

<script lang="ts" setup>
import axios from '@/utils/request'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
let myEcharts = ref(null) as any
//用户数量
let users = ref<number>()
//房间数量
let rooms = ref<number>()
//今日收益
let dayMoney = ref<number>(0)
//总收益
let allMoney = ref<number>(0)

let option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF'],
  title: {
    text: '近五周日销售额统计',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['week 1', 'week 2', 'week 3', 'week 4', 'week 5'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'week 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)',
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [140, 232, 101, 264, 90, 340, 250],
    },
    {
      name: 'week 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)',
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [120, 282, 111, 234, 220, 340, 310],
    },
    {
      name: 'week 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)',
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [320, 132, 201, 334, 190, 130, 220],
    },
    {
      name: 'week 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)',
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [220, 402, 231, 134, 190, 230, 120],
    },
    {
      name: 'week 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)',
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [220, 302, 181, 234, 210, 290, 150],
    },
  ],
}
onMounted(async () => {
  const myChart = echarts.init(myEcharts.value)
  let userData = await axios.get('/user')
  let roomData = await axios.get('/room')
  let day = await axios.get('/order/day')
  let all = await axios.get('/order')
  let thisWeek = await axios.get('/order/this')
  let lastWeek = await axios.get('/order/last')
  let thisw = thisWeek.data.map((item: any) => {
    return item.price
  })
  let lastw = lastWeek.data.map((item: any) => {
    return item.price
  })
  option.series[0].data = thisw
  option.series[1].data = lastw
  users.value = userData.data.length
  rooms.value = roomData.data.length
  day.data.forEach((item: any) => {
    dayMoney.value += item.price
  })
  all.data.forEach((item: any) => {
    allMoney.value += item.price
  })
  option && myChart.setOption(option)
})
</script>

<style lang="less" scoped>
.root {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px;
    > div {
      aspect-ratio: 7 / 2;
      background-color: #ccc;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      i {
        font-size: 80px;
        color: rgb(232, 232, 232);
        position: absolute;
        right: 5px;
        bottom: 5px;
        // transform: rotateZ(-60deg);
      }
      span {
        color: #fff;
        font-size: 20px;
      }
      .title {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .data {
        position: absolute;
        top: 60%;
        left: 10px;
      }
    }
    .user {
      background-color: #ac49fc;
    }
    .room {
      background-color: #55bcfe;
    }
    .day {
      background-color: #626cff;
    }
    .all {
      background-color: #f6a929;
    }
  }
  .context {
    width: 100%;
    flex: 1;
    padding: 40px 0;
    box-sizing: border-box;
  }
}
</style>
